<template>
    <div >
        <div 
            class="item"
            v-for="(item, index) of list"
            :key="index"
        >
            <div class="item-titel border-bottom">
                <span class="iconfont banner-icon">&#xe650;</span>
                {{item.title}}
            </div>
            <div class="item-children" v-if="item.children">
                <detail-list :list="item.children"></detail-list>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'DetailList',
    props:{
        list: Array
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .border-bottom
        &:before
            border-color #ccc
    .item-titel
        line-height .8rem
        padding 0 .2rem
        font-size .32rem
        .iconfont
            color $bgColor
    .item-children
        padding 0 .4rem
</style>


